<!-- 群主可以看到每天发送的金币情况 -->
<template>
	<app-layout>
		<view class="contetn">
			<view class="dir-left-nowrap date-search cross-center">
				<!-- <view class="uni-list-cell-left">
					查看某个时期的金币
				</view> -->
				<view class="section1" :class="start_date == '' ? '' : 'active'">
					<picker mode="date" :value="start_date" @change="dateChanges">
						<view class="">{{start_date == '' ? '选择开始时间' : start_date}}</view>
					</picker>
				</view>
				<view class="section1" :class="end_date == '' ? '' : 'active'">
					<picker mode="date" :value="end_date" @change="dateChangee">
						<view class="">{{end_date == '' ? '选择结束时间' : end_date}}</view>
					</picker>
				</view>
				<view class="dir-left-nowrap section2">
					<view class="sec-item" @click="search">
						搜索
					</view>
					<view class="sec-item" v-if="start_date != '' || end_date != ''" @click="clear">
						清空
					</view>
				</view>
			</view>
			<view class="a-image">
				<image class="image" :src="topimginfo.icon_url" mode="widthFix"></image>
				<view class="all-num">
					总共发送的金币数：{{integral}}
				</view>
				<!-- <text v-if="isSearch">{{start_date}} 到 {{end_date}}</text> -->
			</view>
			<view class="sibling">
				<view class="dir-left-nowrap sibltab sibtab">
					<view class="tab1">
						排名
					</view>
					<view class="tab2">
						微信名
					</view>
					<view class="tab3">
						已发放金币数
					</view>
				</view>
				<view class="dir-left-nowrap cross-center siball sibtab"
					:class="((index+1)%6 == 0) || ((index+1)%6 == 5) || ((index+1)%6 == 4) ? 'linebg' : ''"
					v-for="(item,index) in list" :key="index">
					<view class="tab1">
						第{{index+1}}名
					</view>
					<view class="dir-left-nowrap cross-center tab2">
						<image class="avatar" :src="item.user.userInfo.avatar" mode=""></image>
						<view class="nickname">
							{{item.user.nickname}}
						</view>
					</view>
					<view class="tab3">
						{{item.shownums}}
					</view>
				</view>
			</view>
			<view class="nopt" v-if="list.length == 0">
				暂无数据
			</view>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		data() {
			return {
				page: 1,
				limit: 20,
				pagecount: 1,
				list: [],
				mall_id: 1,
				topimginfo: '',

				integral: 0,

				start_date: '',
				end_date: '',
				isSearch: false
			}
		},
		onLoad(options) {
			this.mall_id = options.mall_id || 1
			this.onReq(253)
			// console.log(this.shareid, this.mall_id, '**************');
			this.loadList()
			uni.hideShareMenu()
		},
		onReachBottom() {
			if (this.pagecount > this.page) {
				this.page++
				this.loadList()
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info
			}),
		},
		methods: {
			search() {
				if (this.start_date == '') {
					uni.showToast({
						title: '请选择开始时间',
						icon: 'none'
					})
					return
				}
				this.isSearch = true
				this.page = 1
				this.pagecount = 1
				this.list = []
				this.loadList()
			},
			clear() {
				this.isSearch = false
				this.page = 1
				this.pagecount = 1
				this.list = []
				this.start_date = ''
				this.end_date = ''
				this.loadList()
			},
			dateChanges(e) {
				this.start_date = e.detail.value
				// this.$utils.datetime('Y-m-d')
			},
			dateChangee(e) {
				this.end_date = e.detail.value
			},
			jump(item) {
				if (item == '/' || item == 'javascript:;') {
					return
				}
				if (item == '/pages/index/index' || item.indexOf('/pages/gospeed/index') != -1 || item ==
					'/pages/sixty/index' || item == '/pages/user-center/user-center' || item == '/pages/store/mine/mine') {
					uni.reLaunch({
						url: item
					})
					return;
				}
				uni.navigateTo({
					url: item
				})
			},
			onReq(kid) {
				this.$request({
					url: this.$api.navs.catedetail,
					data: {
						keyword: kid
					}
				}).then((res) => {
					if (kid == 253) {
						this.topimginfo = res.data.list[0]
					}
				}).catch(() => {

				})
			},
			loadList() {
				let pdata = {
					page: this.page,
					puser_id: this.userInfo.options.user_id,
					mall_id: this.mall_id
				}
				if (this.isSearch) {
					pdata = {
						page: this.page,
						puser_id: this.userInfo.options.user_id,
						mall_id: this.mall_id,
						date_start: this.start_date,
						date_end: this.end_date
					}
				}
				this.$request({
					url: this.$api.wechat_group.ranking_list,
					data: pdata
				}).then(res => {
					this.list = this.list.concat(res.data.list)
					this.pagecount = res.data.pagination.page_count
					this.integral = res.data.alljbnum
				}).catch(err => {})
			}
		}
	}
</script>

<style scoped lang="scss">
	.date-search {
		position: relative;
		font-size: 28rpx;
		height: 80rpx;
	}

	.section1 {
		position: relative;
		width: 240rpx;
		padding: 4rpx 8rpx;
		background-color: #FFFFFF;
		text-align: center;
		// &+.section1 {
		margin-left: 24rpx;

		// }
		&.active {
			background-color: #9a5e3b;
			color: #FFFFFF;
		}

		.close-tip {
			position: absolute;
			right: 0;
			top: 0;
			width: #{64rpx};
			height: #{64rpx};
			margin-right: #{20rpx};
			z-index: 30;
		}

		.search-close {
			width: #{32rpx};
			height: #{32rpx};
			border-radius: 50%;
			margin: #{16rpx};
		}
	}

	.section2 {
		margin-left: 24rpx;
		text-align: center;
		width: 190rpx;

		.sec-item {
			// width: 95rpx;
			padding: 6rpx 0;
			width: 100%;
			border: 1rpx solid rgba($color: #000000, $alpha: .1);
		}
	}

	.a-image {
		width: 100%;
		position: relative;
		color: #FFFFFF;
		font-size: 28rpx;

		.all-num {
			position: absolute;
			bottom: 10rpx;
			left: 5rpx;
		}

		.all-mx {
			position: absolute;
			bottom: 10rpx;
			right: 5rpx;
		}

		.image {
			width: 100%;
		}
	}

	.sibling {
		width: 100%;
		margin-top: 12rpx;

		.sibtab {
			text-align: center;
			border-bottom: 2rpx #000000 solid;
			font-size: 26rpx;
			padding: 18rpx 24rpx;
		}

		.sibltab {
			background-color: #f9da4e;
			// height: 40rpx;
			line-height: 40rpx;
		}

		.sibmyself {
			background-color: #44e6fd;
		}

		.linebg {
			background: #43e5ff;
		}

		.tab1 {
			// margin-left: 21rpx;
			width: 138rpx;
		}

		.tab2 {
			margin-left: 10rpx;
			width: 368rpx;
			text-align: left;
		}

		.tab3 {
			margin-left: 10rpx;
			width: 156rpx;
		}

		.avatar {
			width: 64rpx;
			height: 64rpx;
			border-radius: 64rpx;
		}

		.nickname {
			flex: 1;
			padding: 0 0 0 24rpx;
		}
	}

	.siball {
		background-color: #FFFFFF;
	}

	.sibmore {
		background-color: #b5f5ff;
	}

	.befbutton {
		background: #342B2A;
		width: 100%;
		height: 168rpx;
		overflow: hidden;
		color: #FFFFFF;
		text-align: center;
	}

	.fbutton {
		border-radius: 0;
		width: 100%;
		height: 168rpx;
		line-height: 168rpx;
		font-weight: bold;
		font-size: 36rpx;
	}

	.bsbut {
		color: #FFFFFF;
		background: #CD9C62;
	}

	.bgbut {
		background: #342B2A;
		color: #FFFFFF;
	}

	.bhbut {
		background: #9a5e3b;
		color: #FFFFFF;
	}

	.bcbut {
		border: 1rpx solid #342B2A;
		color: #342B2A;
	}

	.contetn {
		// background-color: #FFFFFF;
		width: 100%;
		height: 100%;
		// padding: 0 24rpx;
	}

	/* .follow {
		width: 100%;
		display: flex;
		align-items: center;
		height: 170rpx;
		font-size: 28rpx;
		font-weight: 700;
		justify-content: space-between;
		position: relative;
		padding: 0 12rpx;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;

		}

		.nickname {
			flex: auto;
			padding: 0 20rpx;
		}
	} */
	.follow {
		width: 100%;
		display: flex;
		align-items: center;
		height: 170rpx;
		font-size: 28rpx;
		font-weight: 700;
		justify-content: space-between;
		position: relative;
		padding: 0 36rpx;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;

		}

		.nickname {
			flex: 1;
			padding: 0 20rpx;
		}

		.reviewed {
			padding: 10rpx 20rpx;
			border: 1rpx solid #dcdcdc;
			border-radius: 12rpx;
		}

		.tips {
			position: absolute;
			top: 5rpx;
			right: 12rpx;
			font-size: 24rpx;
			color: #353535;
		}

		.approved {
			color: #279e1a;
		}

		.approvedf {
			color: #cf0000;
		}
	}

	.follow+.follow {
		border-top: 1rpx solid #dcdcdc;
	}

	.nopt {
		text-align: center;
		line-height: 360rpx;
		font-size: 24rpx;
	}
</style>
